<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <script src="/js/haha.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 上部分：欢迎标题 */
        .header {
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            color: #006064;
            text-align: center;
            padding: 20px;
            border-radius: 15px;
            margin: 20px;
        }

        /* 中部分 */
        .main {
            display: flex;
            flex: 1;
            margin: 0 20px;
        }

        /* 左侧：导航菜单 */
        .sidebar {
            width: 200px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            margin-right: 20px;
        }

        .el-menu {
            border: none;
            background-color: transparent;
        }

        .el-menu-item,
        .el-submenu__title {
            color: #00838f;
            font-weight: 500;
        }

        .el-menu-item:hover,
        .el-submenu__title:hover {
            background-color: #e0f7fa;
        }

        /* 右侧部分 */
        .content {
            flex: 1;
            height: 600px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        /* 右侧上部分：动态增减标签页的表头 */
        .tab-container {
            margin-bottom: 20px;
        }

        .el-tabs__item {
            color: #00838f;
        }

        .el-tabs__item.is-active {
            color: #006064;
            font-weight: 600;
        }

        .el-tabs__nav-wrap::after {
            background-color: #b2ebf2;
        }

        /* 右侧下部分：内容显示区 */
        .page-content {
            flex: 1;
            border: 1px solid #b2ebf2;
            padding: 0;
            border-radius: 15px;
            background-color: white;
        }

        .page-content iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 15px;
        }

        /* 下部分：网站信息 */
        .footer {
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            color: #006064;
            text-align: center;
            padding: 20px;
            border-radius: 15px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 上部分：欢迎标题 -->
        <div class="header">
            <h1>欢迎使用本系统</h1>
        </div>
        <!-- 中部分 -->
        <div class="main">
            <!-- 左侧：导航菜单 -->
            <div class="sidebar">
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-submenu v-for="(p,index) in permissionArr" :index="p.id.toString()">
                        <template slot="title">
                            <i :class="p.icon"></i>
                            <template>{{p.pname}}</template>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(s,index) in p.subMenu" :index="s.id" @click="addTab(s)">
                                <i :class="s.icon"></i>
                                {{s.pname}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </div>
            <!-- 右侧部分 -->
            <div class="content">
                <!-- 右侧上部分：动态增减标签页的表头 -->
                <div class="tab-container">
                    <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="欢迎页" name="welcome"></el-tab-pane>
                        <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab" :name="tab"
                            closable></el-tab-pane>
                    </el-tabs>
                </div>
                <!-- 右侧下部分：内容显示区 -->
                <div class="page-content">
                    <iframe :src="iframeSrc"></iframe>
                </div>
            </div>
        </div>
        <!-- 下部分：网站信息 -->
        <div class="footer">
            <p>版权所有 &copy; 2025 示例公司</p>
        </div>
    </div>
    <script>
        $.get(BASE_URL + "/emp", function (backData) {
            app.userInfo = backData.data.userInfo;
            app.permissionArr = backData.data.permissionInfo;
        });

        var app = new Vue({
            el: '#app',
            data: {
                activeTab: 'welcome',
                permissionArr: [],
                tabs: [],
                iframeSrc: '/views/welcome.html',
                tabUrlMap: {} // 用于存储标签页名称和对应的 URL
            },
            methods: {
                addTab(s) {
                    if (!this.tabs.includes(s.pname)) {
                        this.tabs.push(s.pname);
                        this.tabUrlMap[s.pname] = s.url; // 存储标签页和对应的 URL
                    }
                    this.activeTab = s.pname;
                    this.iframeSrc = s.url;
                },
                removeTab(targetName) {
                    const index = this.tabs.indexOf(targetName);
                    if (index > -1) {
                        this.tabs.splice(index, 1);
                        delete this.tabUrlMap[targetName]; // 移除对应的 URL 映射
                    }
                    if (this.activeTab === targetName) {
                        if (this.tabs.length > 0) {
                            this.activeTab = this.tabs[this.tabs.length - 1];
                            this.iframeSrc = this.tabUrlMap[this.activeTab];
                        } else {
                            this.activeTab = 'welcome';
                            this.iframeSrc = '/views/welcome.html';
                        }
                    }
                },
                handleTabClick(tab) {
                    if (tab.name === 'welcome') {
                        this.iframeSrc = '/views/welcome.html';
                    } else {
                        this.iframeSrc = this.tabUrlMap[tab.name];
                    }
                },
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        });
    </script>
</body>

</html>